<template>

    <el-drawer :title="handleShow=='add'?'新增':'编辑'" visible v-if="handleShow" @close="close()" size="1200px" :wrapperClosable="false">
        <div class="add-main box">
            <div class="btn-con">
                <el-button type="primary" size="small" icon="el-icon-circle-check" @click.native.prevent="submit()" :disabled="loading">提交
                </el-button>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading">
                <el-col :span="8">
                    <el-form-item label="员工名称" prop="name">
                        <el-input style="width:215px;" v-model="form.name" placeholder="请输入员工名称" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="联系方式" prop="mobile">
                        <el-input style="width:215px;" v-model="form.mobile" placeholder="请输入联系方式" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号" prop="id_card">
                        <el-input style="width:215px;" v-model="form.id_card" placeholder="请输入身份证号" />
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="所属部门" prop="sector_id">
                        <el-select v-model="form.sector_id" placeholder="请输入选择" clearable size="small" @change="getJobsList(form.sector_id,2)"
                            filterable>
                            <el-option v-for="dict in depList" :key="dict.id" :label="dict.name" :value="dict.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="jobsList.length>0">
                    <el-form-item label="所属岗位" prop="jobs_id">
                        <el-select v-model="form.jobs_id" placeholder="请输入选择" clearable size="small" filterable>
                            <el-option v-for="dict in jobsList" :key="dict.id" :label="dict.name" :value="dict.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="账号" prop="login_account">
                        <el-input v-if="!edit" style="width:215px;" v-model="form.login_account" :readonly="readonly" @blur="readonly = true"
                            @click.native="readonly = false" placeholder="请输入账号" />
                        <span v-else>{{form.login_account}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="密码" prop="login_pass" :rules="{required:handleShow == 'add'? true : false,message:'请输入密码',validator: isPass,message: '密码长度至少6位', trigger: 'blur'}">
                        <el-input type="password" style="width:215px;" v-model="form.login_pass" placeholder="请输入密码(密码长度至少6位)" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="是否护工" prop="is_nurses">
                        <el-radio-group v-model="form.is_nurses">
                            <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">{{dict.dictLabel}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col> -->
                <el-col :span="24">
                    <el-form-item label="员工头像" prop="avatar">
                        <el-upload class="avatar-uploader" :action="$uploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img v-if="form.avatar" :src="form.avatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="最高学历：" prop="highest_education">
                        <el-select v-model="form.highest_education" placeholder="请选择" class="handle-select mr10">
                            <el-option v-for="dict in educationDegree" :key="dict.dictValue" :value="dict.dictValue" :label="dict.dictLabel">
                                {{ dict.dictLabel }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学位：" prop="academic_degree">
                        <el-select v-model="form.academic_degree" placeholder="请选择" class="handle-select mr10">
                            <el-option v-for="dict in degreeList" :key="dict.dictValue" :value="dict.dictValue" :label="dict.dictLabel">
                                {{ dict.dictLabel }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="毕业学校" prop="graduation_school">
                        <el-input style="width:215px;" v-model="form.graduation_school" placeholder="请输入毕业学校" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所学专业" prop="major">
                        <el-input style="width:215px;" v-model="form.major" placeholder="请输入所学专业" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="毕业时间" prop="graduation_time">
                        <el-date-picker v-model="form.graduation_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择毕业时间" class="handle-input mr10" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="性别:" prop="sex">
                        <el-radio-group v-model="form.sex" class="handle-input mr10">
                            <el-radio v-for="dict in seX" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                {{ dict.dictLabel }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker v-model="form.birthday" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期" class="handle-input mr10" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="民族:" prop="nation">
                        <el-select v-model="form.nation" placeholder="请选择民族" filterable clearable class="handle-input mr10">
                            <el-option v-for="dict in nationList" :key="dict.value" :label="dict.info" :value="dict.info" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="婚姻状况:" prop="marital_status">
                        <el-select v-model="form.marital_status" placeholder="请选择婚姻状况" filterable clearable class="handle-input mr10">
                            <el-option v-for="dict in maritalStatus" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictLabel" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工作QQ" prop="work_qq">
                        <el-input style="width:215px;" v-model="form.work_qq" placeholder="请输入工作QQ" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="个人QQ" prop="private_qq">
                        <el-input style="width:215px;" v-model="form.private_qq" placeholder="请输入个人QQ" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="Email" prop="email">
                        <el-input style="width:215px;" v-model="form.email" placeholder="请输入个人Email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同开始日" prop="contract_start_time">
                        <el-date-picker v-model="form.contract_start_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择合同开始日"
                            :picker-options="startContractPicker" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同截止日" prop="contract_end_time">
                        <el-date-picker v-model="form.contract_end_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择合同截止日" :picker-options="endContractPicker" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="试用开始时间" prop="probation_start_time">
                        <el-date-picker v-model="form.probation_start_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择试用开始时间"
                            :picker-options="startProbationPicker" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="试用结束时间" prop="probation_end_time">
                        <el-date-picker v-model="form.probation_end_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择试用结束时间"
                            :picker-options="endProbationPicker" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工资卡开户行" prop="payroll_bank">
                        <el-input style="width:215px;" v-model="form.payroll_bank" placeholder="请输入工资卡开户行" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工资卡账号" prop="payroll_number">
                        <el-input style="width:215px;" v-model="form.payroll_number" placeholder="请输入工资卡账号" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯省份" prop="native_place_province">
                        <el-select v-model="form.native_place_province" placeholder="请输入选择籍贯省份" @change="getNativeCity" clearable>
                            <el-option v-for="dict in areaData" :key="dict.code" :label="dict.name" :value="dict.name" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯城市" prop="native_place_city">
                        <el-select v-model="form.native_place_city" placeholder="请输入选择籍贯城市" @change="getNativeArea" filterable clearable>
                            <el-option v-for="dict in cityList" :key="dict.code" :label="dict.name" :value="dict.name" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯区/县" prop="native_place_area">
                        <el-select v-model="form.native_place_area" placeholder="请输入选择籍贯区/县" filterable clearable>
                            <el-option v-for="dict in areaList" :key="dict.code" :label="dict.name" :value="dict.name" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯详细地址" prop="native_place_detailed">
                        <el-input v-model="form.native_place_detailed" placeholder="请输入籍贯详细地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居住省份" prop="current_place_province">
                        <el-select v-model="form.current_place_province" placeholder="请输入选择现居住省份" @change="getCurrentCity" clearable>
                            <el-option v-for="dict in areaData" :key="dict.code" :label="dict.name" :value="dict.name" />
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居住城市" prop="current_place_city">
                        <el-select v-model="form.current_place_city" placeholder="请输入选择现居住城市" @change="getCurrentArea" filterable clearable>
                            <el-option v-for="dict in currentCityList" :key="dict.code" :label="dict.name" :value="dict.name" />
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居住区/县" prop="current_place_area">
                        <el-select v-model="form.current_place_area" placeholder="请输入选择现居住区/县" filterable clearable>
                            <el-option v-for="dict in currentAreaList" :key="dict.code" :label="dict.name" :value="dict.name" />
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居详细地址" prop="current_place_detailed">
                        <el-input v-model="form.current_place_detailed" placeholder="请输入现居住详细地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="紧急联系人" prop="contacts_name">
                        <el-input style="width:215px;" v-model="form.contacts_name" placeholder="请输入紧急联系人" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="紧急联系方式" prop="contacts_mobile">
                        <el-input style="width:215px;" v-model="form.contacts_mobile" placeholder="请输入紧急联系方式" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入职时间" prop="entry_time">
                        <el-date-picker v-model="form.entry_time" type="date" value-format="yyyy-MM-dd" placeholder="请选择入职时间" class="handle-input mr10" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="招聘来源" prop="recruit_source">
                        <el-input style="width:215px;" v-model="form.recruit_source" placeholder="请输入招聘来源" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="离职方式" prop="quit_mode">
                        <el-input style="width:215px;" v-model="form.quit_mode" placeholder="请输入离职方式" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="离职原因" prop="quit_reason">
                        <el-input style="width:215px;" v-model="form.quit_reason" placeholder="请输入离职原因" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <div class="record-list">
                        <div>教育经历</div>
                        <el-table border :data="form.eduList">
                            <el-table-column label="学校名称" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.graduation_school" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="时间" align="center" width="400">
                                <template slot-scope="scope">
                                    <el-date-picker v-model="scope.row.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="请选择时间" />
                                </template>
                            </el-table-column>
                            <el-table-column label="专业" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.major" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="学历" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.highest_education" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-plus" v-if="scope.$index==0" @click="form.eduList.push({})">
                                        增加
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete" v-else @click="del(scope.$index,scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="text-error">{{textError}}</div>
                    </div>
                </el-col> -->
                <!-- <el-col :span="24">
                    <div class="record-list record-list1 mt20">
                        <div>工作经历</div>
                        <el-table border :data="form.workList">
                            <el-table-column label="企业名称" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.enterprise" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="职位名称" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.position" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="时间" align="center" width="400">
                                <template slot-scope="scope">
                                    <el-date-picker v-model="scope.row.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="请选择时间" />
                                </template>
                            </el-table-column>
                            <el-table-column label="证明人" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.witness" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="证明人联系方式" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.witness_tel" @keyup.native="textError=''"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-plus" v-if="scope.$index==0" @click="form.workList.push({})">
                                        增加
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete" v-else @click="delWork(scope.$index,scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column> -->
                <!-- </el-table>
                        <div class="text-error">{{textError}}</div>
                    </div>
                </el-col> -->
            </el-form>
        </div>
    </el-drawer>

</template>
<script>
import { isvalidatemobile, cardid } from '@/utils/validate'
import { getJobsListsAll } from '@/api/common'
import { seX, yesNo, educationDegree, degreeList, maritalStatus } from '@/api/dictionary'
import throttle from 'lodash.throttle'
import md5 from 'js-md5'
import { setStaff } from '@/api/user/staff.js'
export default {
    name: '',
    props: {
        handleShow: {
            type: String
        },
        depList: {
            type: Array,
            default: function () {
                return []
            }
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        isSelf: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const ismobile = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]))
            } else {
                callback()
            }
        }
        const cardId = (rule, value, callback) => {
            if (cardid(value)[0]) {
                callback(new Error(cardid(value)[1]))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            edit: this.handleShow == 'edit',
            readonly: '',
            form: {
                name: null,
                // mobile: null,
                // id_card: null,
                sector_id: null,
                jobs_id: null,
                login_account: null,
                login_pass: null,
                // is_nurses: null,
                avatar: null,
                // eduList: [{}],
                // workList: [{}]
            },
            rules: {
                sector_id: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
                jobs_id: [{ required: true, message: '请选择所属岗位', trigger: 'change' }],
                name: [{ required: true, message: '请输入员工名称', trigger: 'blur' }],
                // mobile: [{ required: true, message: '请输入联系方式', trigger: 'blur' }, { validator: ismobile, trigger: 'blur' }],
                // id_card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }, { validator: cardId, trigger: 'blur' }],
                login_account: [{ required: true, message: '请输入账号', trigger: 'blur' },{ validator: ismobile, trigger: 'blur' }],
                // login_psss: [{ required: false, message: '请输入密码', trigger: 'blur' }, { validator: isPass, trigger: 'blur' }],
                // is_nurses: [{ required: true, message: '请选择是否护工', trigger: 'change' }],
                avatar: [{ required: true, message: '请选择员工头像', trigger: 'change' }]
            },
            jobsList: [],
            // yesNo: yesNo,
            // textError: '',
            // educationDegree: educationDegree,
            // degreeList: degreeList,
            // seX: seX,
            // maritalStatus: maritalStatus,
            // startContractPicker: this.beginDate(),
            // endContractPicker: this.processDate(),
            // startProbationPicker: this.beginProbation(),
            // endProbationPicker: this.processProbation(),
            // cityList: [],
            // areaList: [],
            // currentCityList: [],
            // currentAreaList: []
        }
    },
    watch: {
        'form.sector_id'(val) {
            if (val) {
                getJobsListsAll({ sector_id: val }).then(res => {
                    this.jobsList = res.data
                })
            }
        }
    },
    created() {
        if (this.edit) {
            this.form = { ...this.form, ...this.data }
            // this.form.eduList = this.form.edu_process ? JSON.parse(this.form.edu_process) : [{}]
            // this.form.workList = this.form.work_process ? JSON.parse(this.form.work_process) : [{}]
        }
    },
    methods: {
        isPass(rule, value, callback) {
            if (value && value.length < 6) {
                // callback(new Error('密码长度至少6位'))
                return callback(new Error('密码长度至少6位'))
            } else {
                callback()
            }
        },
        close() {
            this.jobsList = []
            this.form = {}
            this.$emit('close')
        },
        // beginDate() {
        //     const self = this
        //     return {
        //         disabledDate(time) {
        //             if (self.form.contract_end_time) {
        //                 return new Date(self.form.contract_end_time).getTime() < time.getTime()
        //             }
        //         }
        //     }
        // },
        // processDate() {
        //     const self = this
        //     return {
        //         disabledDate(time) {
        //             if (self.form.contract_start_time) {
        //                 //如果开始时间不为空，则结束时间大于开始时间
        //                 return new Date(self.form.contract_start_time).getTime() > time.getTime()
        //             }
        //         }
        //     }
        // },
        // beginProbation() {
        //     const self = this
        //     return {
        //         disabledDate(time) {
        //             if (self.form.probation_end_time) {
        //                 return new Date(self.form.probation_end_time).getTime() < time.getTime()
        //             }
        //         }
        //     }
        // },
        // processProbation() {
        //     const self = this
        //     return {
        //         disabledDate(time) {
        //             if (self.form.probation_start_time) {
        //                 //如果开始时间不为空，则结束时间大于开始时间
        //                 return new Date(self.form.probation_start_time).getTime() > time.getTime()
        //             }
        //         }
        //     }
        // },
        getJobsList(id) {
            this.$set(this.form, 'jobs_id', null)
            getJobsListsAll({ sector_id: id }).then(res => {
                this.jobsList = res.data
            })
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form, 'avatar', res.data[0].fileurl)
        },
        // 删除表格行
        // del(index, row) {
        //     row.del = true
        //     let i = -1
        //     this.form.eduList.forEach((e, index) => {
        //         if (e.del) {
        //             i = index
        //         }
        //     })
        //     this.form.eduList.splice(i, 1)
        // },
        // delWork(index, row) {
        //     row.del = true
        //     let i = -1
        //     this.form.workList.forEach((e, index) => {
        //         if (e.del) {
        //             i = index
        //         }
        //     })
        //     this.form.workList.splice(i, 1)
        // },
        // getNativeCity(val) {
        //     if (val) {
        //         this.$set(this.form, 'native_place_city', null)
        //         this.$set(this.form, 'native_place_area', null)
        //         this.areaList = []
        //         this.cityList = this.areaData.find(item => item.name == val).cityList
        //     }
        // },
        // getNativeArea(val) {
        //     if (val) {
        //         this.$set(this.form, 'native_place_area', null)
        //         this.areaList = this.cityList.find(item => item.name == val).areaList
        //     }
        // },
        // getCurrentCity(val) {
        //     if (val) {
        //         this.$set(this.form, 'current_place_city', null)
        //         this.$set(this.form, 'current_place_area', null)
        //         this.currentAreaList = []
        //         this.currentCityList = this.areaData.find(item => item.name == val).cityList
        //     }
        // },
        // getCurrentArea(val) {
        //     if (val) {
        //         this.$set(this.form, 'current_place_area', null)
        //         this.currentAreaList = this.currentCityList.find(item => item.name == val).areaList
        //     }
        // },
        submit: throttle(function () {
            // let fun = [this.$refs.form.validate()]
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true
                    let json = this.form
                    json.login_pass = json.login_pass ? md5(json.login_pass) : null
                    json.staff_id = json.id ? json.id : null
                    setStaff(json).then(ress => {
                        if (this.handleShow == "edit" && this.isSelf) {
                            localStorage.setItem('ms_username', this.form.login_account)
                            localStorage.setItem('ms_avatar', this.form.avatar)
                        }
                        this.msgSuccess('操作成功！')
                        this.close()
                        this.loading = false
                        this.$emit('load')
                    })
                }
            })
        }, 1000, { trailing: false })
    }
}
</script>

<style lang='scss' scoped>
.record-list1 {
    padding-bottom: 60px;
}
</style>
